<?php
/**
 * Created by PhpStorm.
 * User: wangjie
 * Date: 2018/5/4
 * Time: 18:04
 */
use yii\helpers\Html;
use kartik\form\ActiveForm;
use yii\helpers\Url;
use yii\widgets\DetailView;

/* @var $this yii\web\View */
/* @var $model common\models\AccountWechat */

$this->title = '图片上传';
$this->params['breadcrumbs'][] = ['label' => 'Account Wechats', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>

<table class="table table-striped table-bordered">
    <h2>上传七牛成功后可使用的地址：</h2>
    <br>
    <tr>
        <td><b id="content"><?php echo $url; ?></b></td>

        <td><button id="copyBT" class="">点击复制地址</button></td>

        <td><span style="color: red;">(*请将地址复制到需要提交的表单中即可!)</span>
    </tr>
    <th>
        <a href="<?php echo Url::to(['params/image-upload']); ?>" class="btn btn-primary">重新上传新图片</a>
    </th>
</table>
<script>
    //JS里指定复制的内容
    function copyArticle(event) {
        const range = document.createRange();
        range.selectNode(document.getElementById('content'));

        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        Toast("复制成功！");
    }
    document.getElementById('copyBT').addEventListener('click', copyArticle, false);

    // 吐司弹窗
    function Toast(msg,duration){
        duration=isNaN(duration)?1000:duration;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="" +
            "width: 20%;" +
            "min-width: 50px;" +
            "opacity: 0.7;" +
            "height: 60px;" +
            "color: rgb(237, 237, 237);" +
            "line-height: 60px;" +
            "text-align: center;" +
            "border-radius: 5px;" +
            "position: fixed;" +
            "top: 50%;" +
            "left: 45%;" +
            "z-index: 999999;" +
            "background: rgb(0, 0, 0);" +
            "font-size: 24px;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }

</script>

